<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/iconfont.css" />
		<link rel="stylesheet" href="../css/loading.css" />
		<link rel="stylesheet" href="../css/organize-groups-peoplehandle.css" />
		<style>
			[v-cloak] {
				display: none !important;
			}
			/*确认创建群聊按钮设置*/
			
			.mui-bar-nav .mui-btn-link:active {
				color: #fff;
			}
			
			.mui-bar-nav .mui-btn-link:enabled:active {
				color: #fff;
				background-color: transparent;
			}
			
			.mui-bar-nav .mui-btn-blue:enabled:active {
				border: 0
			}
			/*搜索按钮文字设置*/
			
			input[type=search] {
				text-align: left;
				font-size: 14px;
				font-weight: initial;
			}
		</style>
	</head>

	<body>
		<div id="Loading">
			<div class="loader-inner ball-beat">
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
		<div id="mui-content" v-cloak>
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="width: 45px;"></a>
				<h1 class="mui-title"></h1>
				<button class="mui-btn mui-btn-blue mui-btn-link mui-pull-right" @click="handleMembers" v-show="checkednums > 0">确定({{checkednums}})</button>
			</header>
			<div class="mui-content mui-scroll-wrapper">
				<div class="mui-input-row" style="height: 50px; padding: 10px 10px 0;">
					<input type="search" class="mui-input-clear" style="width:80%;background-color: rgba(239, 238, 243, .5);" v-model="search" placeholder="请输入姓名搜索">
					<button type="button" @click="searchQuerylist(search)" class="mui-btn mui-btn-primary" style="height: 32px; font-size: 14px;line-height: 13px;">搜索</button>
				</div>
				<div class="groups-list mui-scroll" style="padding-bottom: 50px;">
					<!--通讯目录-->
					<div v-show="!search">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell mui-checkbox" v-for="item in items">
								<div class="mui-col-xs-12 selectors" v-on:click="checkItem(item)">
									<img class="mui-media-object mui-pull-left" style="border-radius: 3px;" src="../images/qq.png">
									<div class="mui-col-xs-8 mui-media-body" style="font-size: 16px; line-height: 45px; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;">
										{{item.name}}{{item.partyJob ? '【'+item.partyJob+'】':''}}
									</div>
									</label>
									<input name="checkbox" value="" type="checkbox" :checked="item.check" :disabled="item.disabled">
								</div>
							</li>
						</ul>
					</div>
					<div v-show='flag'>
						<div class="title title-sz">
							通讯录
						</div>
						<ul class="mui-table-view">
							<li class="mui-table-view-cell mui-checkbox" v-for="useritem in searchlist">
								<div class="mui-col-xs-12 selectors" v-on:click="checkItem(useritem)">
									<img class="mui-media-object mui-pull-left" style="border-radius: 3px;" src="../images/qq.png">
									<div class="mui-col-xs-8 mui-media-body" style="font-size: 16px; line-height: 45px; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;">
										{{useritem.name}}{{useritem.partyJob ? '【'+useritem.partyJob+'】':''}}
									</div>
									</label>
									<input name="checkbox" value="" type="checkbox" :checked="useritem.check" :disabled="useritem.disabled">
								</div>
							</li>
							<li class="mui-table-view-cell mui-checkbox" v-show="err">
								<div class="mui-col-xs-12" style="text-align: center; font-size: 14px;">
									未找到相关数据
								</div>
							</li>
						</ul>
					</div>
				</div>
				<!--<nav class="mui-bar mui-bar-tab" style="background: #fff;">
					<div class="mui-input-row" style="height: 50px; padding: 0 10px;">
						<input type="search" class="mui-input-clear" style="width:80%;background-color: rgba(239, 238, 243, .5);" v-model="search" placeholder="请输入姓名搜索">
						<button type="button" @click="searchQuerylist(search)" class="mui-btn mui-btn-primary" style="height: 27px; font-size: 14px;line-height: 3px;">搜索</button>
					</div>
				</nav>-->
			</div>
	</body>

</html>
<script type="text/javascript" src="../js/mui.min.js"></script>
<script type="text/javascript" src="../js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="../js/config.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript" src="../js/localStorage.js"></script>
<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript">
	var usersvm;
	var orglist;
	var loginid = localStorageFunc.get('applogininfo').id; // app登录用户id
	var organizationslist = localStorageFunc.get('organize'); // 获取本地组织机构
	var groupid;
	var selectedMembers; // 群成员列表
	var indexNum;

	mui.plusReady(function() {

		var self = plus.webview.currentWebview();
		selectedMembers = self.usersinfo.users;
		$.each(selectedMembers, function(index, item) {
			if(item.id == loginid) {
				indexNum = index;
				return;
			}
		})

		if(!indexNum) {
			selectedMembers.splice(indexNum, 1); //删除群成员时排除自己
		}
		var titnums = selectedMembers.length < 1000 ? selectedMembers.length : '999+';
		var titname = "删除群成员(" + titnums + ")";
		$('.mui-title').text(titname);

		groupid = self.usersinfo.id; //	群组id
		var membersdata = initData(selectedMembers, self.groupowerid);
		initDom(membersdata);

		mui('.mui-scroll-wrapper').scroll();

		setTimeout(function() {
			document.body.removeChild(document.getElementById('Loading'));
		}, 200)

	});

	function initDom(membersdata) {
		usersvm = new Vue({
			el: "#mui-content",
			data: {
				items: membersdata,
				searchlist: '',
				flag: false,
				search: '',
				err: false,
				groupname: ''
			},
			watch: {
				search: function() { // 监听键入的值且清空之前的匹配列表
					this.searchlist = '';
					this.err = false;
					this.flag = false;
				}
			},
			computed: {
				checkednums: function() { // 计算属性来获取已选择的人数，具有返回值
					var selected = 0;
					if(this.items.length != 0) {
						$.each(this.items, function(index, item) {
							if(item.check == true && item.disabled == false) {
								selected += 1;
							}
						});
					}
					return selected;
				}
			},
			methods: {
				//	切换选择状态
				checkItem: function(item) {
					if(item.disabled == false) {
						item.check = !item.check;
					}

					this.search = '';
				},

				//	邀请群成员or移除群成员
				handleMembers: function() {

					var usersids = [];
					$.each(this.items, function(index, item) {
						if(item.check == true && item.disabled == false) {
							usersids.push(item.id);
						}
					});

					var btn = ["取消", "确认"];
					mui.confirm('确认删除群成员', '温馨提示', btn, function(e) {
						if(e.index == 1) {
							ctdj.group.removeUserGroup(groupid, usersids, function(r) {
								if(r.success) {
									var groupschats = plus.webview.getWebviewById('chat-groupsinfo');
									if(groupschats) {
										mui.fire(groupschats, 'refreshChat', groupid);
									}
									mui.back();
								}
							})
						}
					}, 'div');
				},

				//	人员搜索
				searchQuerylist: function(text) {
					if(!text) {
						mui.toast('请输入姓名进行搜索');
						return;
					}
					var searcharr = selectedMembers;
					var userslist = [];
					$.each(searcharr, function(index, useritem) {
						if(useritem.name.indexOf(text) > -1) { // 匹配当前用户是否包含输入的关键字
							userslist.push(useritem);
						}
					});

					if(userslist.length) {
						this.flag = true;
						this.searchlist = userslist;
					} else {
						this.flag = true;
						this.searchlist = '';
						this.err = true;
					}
				}
			}
		});

	}

	function initData(members, groupid) {

		//	删除群成员操作
		var searcharr = selectedMembers;
		var userslist = [];
		$.each(searcharr, function(index, useritem) {
			$.each(members, function(index, selectedmember) {
				if(useritem.id == selectedmember.id) {
					useritem.check = false; // 新增是否选择属性，默认为未选中状态
					useritem.disabled = false;
					if(useritem.id == groupid) {
						useritem.check = true; // 新增是否选择属性，默认为未选中状态
						useritem.disabled = true;
					}

					userslist.push(useritem);
				}
			})
		});

		return userslist;
	}
</script>